<template>
  <q-page class="column items-center justify-center">
    <q-header bordered class="bg-grey-2 text-dark q-py-sm">
      <q-toolbar class="flex justify-between">
        <q-btn icon="arrow_back_ios" flat dense round color="grey-8" @click="goBack" />
        <div class="text-bold text-h6">用户登录</div>
        <div></div>
      </q-toolbar>
    </q-header>

    <div class="text-h4 text-dark row items-center text-primary"><q-icon name="account_circle" size="lg" color="primary" />用户登录</div>
    <div class="q-my-md full-width">
      <q-separator inset />
    </div>
    <q-input style="width: 260px; padding-bottom: 30px;" filled v-model="phone" :rules="[checkMobile]" label="手机号码">
      <template v-slot:prepend>
        <q-icon name="phone_android" />
      </template>
      <template v-slot:append>
        <q-icon v-if="phone !== ''" name="close" @click="phone = ''" class="cursor-pointer" />
      </template>
    </q-input>

    <q-input style="width: 260px;padding-bottom: 30px;" filled v-model="code" label="验证码">
      <template v-slot:prepend>
        <q-icon name="password" />
      </template>
      <template v-slot:append>
        <q-btn color="secondary" dense unelevated label="获取验证码" @click="requireCode" />
      </template>
    </q-input>
    <q-btn style="width: 130px;" color="primary" unelevated label="注册/登录" @click="verifyCode" />

    <q-footer class="bg-white text-grey-8 q-pa-sm column items-center justify-center">
      <ul>
        <li>发送验证码且验证通过，即可登录系统。</li>
        <li>若是新用户则会自动注册。</li>
        <li>祝您采购愉快。</li>
      </ul>
    </q-footer>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'shopLogin',
  data () {
    return {
      phone: '',
      code: ''
    };
  },
  methods: {
    checkMobile (mobile) {
      return new Promise((resolve, reject) => {
        const reg = /^1[3456789]\d{9}$/;
        resolve(reg.test(mobile) ? null : '请输入正确的手机号码');
      });
    },
    requireCode () {
      // 获取验证码
      this.$axios.post('/c/shop/sendVerCode', { phone: this.phone }).then(({ data }) => {
        if (data.result === 'fail') {
          this.$q.notify({
            message: data.message || '请求失败',
            color: 'negative',
            icon: 'error',
            position: 'center',
            timeout: 4000
          });
        } else {
          this.$q.notify({
            message: '验证码已发送，请注意查收',
            color: 'secondary',
            icon: 'done',
            position: 'center',
            timeout: 2000
          });
        }
      });
    },
    verifyCode () {
      // 验证
      this.$axios.post('/c/shop/checkVerCode', { phone: this.phone, code: this.code }).then(({ data }) => {
        if (data.result === 'fail') {
          this.$q.notify({
            message: data.message || '验证失败',
            color: 'negative',
            icon: 'error',
            position: 'center',
            timeout: 4000
          });
        } else {
          this.$q.localStorage.set('consumerToken', data.token);

          const shopId = this.$q.localStorage.getItem('myShop');
          const path = this.$router.resolve({
            path: `/shop/${shopId}/list`
          });
          this.$router.replace(path);
        }
      });
    },
    goBack () {
      const shopId = this.$q.localStorage.getItem('myShop');
      if (shopId) {
        this.$router.push({ path: `/shop/${shopId}/list` });
      } else {
        this.$router.back()
      }
    }
  }
});
</script>
